<template>
  <div class="rightList">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-caret-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 按钮   -->
    <el-button type="primary" round>主要按钮</el-button>
    <!-- 表格 -->
    <el-table :data="rolesList" style="width: 100%" border>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-row v-for="first in props.row.children" :key="first.id"
          style="margin-bottom:15px;border-bottom:1px dashed #f00;">
            <el-col :span="4">
              <el-tag closable :type="'success'">{{first.authName}}}</el-tag>
            </el-col>
            <el-col :span="20">
              <el-row v-for="second in first.children" :key="second.id"
              style="margin-bottom:10px">
                <el-col :span="4">
                    <el-tag closable :type="'info'">{{second.authName}}</el-tag>
                </el-col>
                <el-col :span="20">

                   <el-tag v-for="third in second.children" :key="third.id" closable :type="'error'" style="margin-right:8px;margin-bottom:5px" @close='delRight(props.row,third.id)'>{{third.authName}}}</el-tag>
                    </el-col>
              </el-row>

            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="roleName" label="角色名称" width="180"></el-table-column>
      <el-table-column prop="roleDesc" label="描述" width="180"></el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="编辑" placement="top-end">
            <el-button type="success" icon="el-icon-edit"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="分配角色" placement="top-end">
            <el-button type="primary" icon="el-icon-share"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top-end">
            <el-button type="danger" icon="el-icon-delete" ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getAllroleList, delRight } from '@/api/role_index.js'
export default {
  data () {
    return {
      rolesList: []
    }
  },
  methods: {
    // delroleList
    delRight (row, rightid) {
      delRight(row.id, rightid)
        .then(res => {
          console.log(res)
          if (res.data.meta.status === 200) {
            //   当前行的数据，重新赋值
            row.children = res.data.data
          }
        // console.log(this.rolesList)
        })
        .catch(() => {
          console.log('删除权限失败')
        })
    }

  },
  mounted () {
    getAllroleList()
      .then(res => {
        console.log(res)
        if (res.data.meta.status === 200) {
          this.rolesList = res.data.data
        }
        // console.log(this.rolesList)
      })
      .catch(() => {
        console.log('角色查询失败')
      })
  }
}
</script>
<style lang='less' scoped>
</style>
